<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎页</title>

    <link rel="stylesheet" type="text/css" th:href="@{/js/layui/css/layui.css/}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fyn/style.css/}" media="all">
</head>
<body class="body">


<h1 style="text-align: center;color: #3c763d;margin-top: 10%">欢迎使用后台管理系统！</h1>

<audio id="playTips" style="display: none" th:src="@{/js/sound/tips.mp3}"></audio>
<hr>

<script th:src="@{/webjars/layui/2.3.0/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/cba/index.js}"></script>
<script type="text/javascript" th:src="@{/js/vip/vip_comm.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/js/cba/my.js}"></script>

<script type="text/javascript" th:inline="javascript">
    layui.use(['element', 'form', 'table', 'layer', 'vip_tab'], function () {
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTab = layui.vip_tab
            , element = layui.element
            , $ = layui.jquery;

        var websocket;
        // 首先判断是否 支持 WebSocket
        var url = 'ws://' + window.location.host + '/admin/websocket';

        if('WebSocket' in window) {
            websocket = new WebSocket(url);
        }
        if('MozWebSocket' in window) {
            websocket = new MozWebSocket(url);
        }

        websocket.onopen = function(event) {
            console.log("WebSocket connection opened.");
        }

        // 接收后台消息
        websocket.onmessage = function(event) {
            console.log("Received message: " + event.data);
            var data = event.data;
            data = JSON.parse(data);

            var content = "";
            // var messageList = data.messages;
            // for (var i in messageList) {
            //     content += '<div style="padding: 5px 20px;">';
            //     content += '<a href="javascript:;" lay-href="'+url+'" lay-text="">';
            //     content += messageList[i].msg;
            //     content += '</a>';
            //     content += '</div>';
            // }

            if(content != '') {
                var audio = document.getElementById('playTips');
                audio.play();

                var index = parent.layer.open({
                    type: 1
                    ,area: ['450px', '350px']
                    ,id: 'layerDemo' + 1
                    ,offset: 'rb'
                    ,content: content
                    ,btn: '我知道了'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        parent.layer.close(index);
                    }
                });
            }
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title: {
                text: '示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });

        // 打开选项卡
        $('.my-nav-btn').on('click', function () {
            if ($(this).attr('data-href')) {
                //vipTab.add('','标题','路径');
                vipTab.add($(this), '<i class="layui-icon">' + $(this).find("button").html() + '</i>' + $(this).find('p:last-child').html(), $(this).attr('data-href'));
            }
        });

        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            }
        }

        var data = [];
        var now = +new Date(1997, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }

        option = {
            title: {
                text: '动态数据 + 时间坐标轴'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };

        var productChart = echarts.init(document.getElementById('main-line'));
        setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);


    });
</script>
</body>
</html>